<link rel="stylesheet" href="/assets/home/css/search.css">

<!-- wowjs  懒加载-->
<link rel="stylesheet" href="/assets/home/plugin/wowjs/animate.min.css" />
<script src="/assets/home/plugin/wowjs/wow.min.js"></script>

<!-- 下拉刷新 -->
<link rel="stylesheet" href="/assets/home/plugin/mescroll/mescroll.min.css" />
<script src="/assets/home/plugin/mescroll/mescroll.min.js"></script>

<!-- 引入http请求插件 -->
<script src="/assets/home/plugin/axios/axios.min.js"></script>
<script src="/assets/home/plugin/axios/request.js"></script>



<!-- 搜索框 -->
<!-- wow bounceIn使搜索框刷新后出现效果变为由小变大 -->
<div class="mui-input-row mui-search wow bounceIn">
    <!-- 样式class="mui-input-clear"是表示为，搜索框右边有个清除搜索框内的内容 -->
    <input type="search" class="mui-input-clear" placeholder="请输入课程名称" name="search" />
</div>

<!-- 课程列表 -->
<!-- 创立一个div,id设为list,然后把课程全部拉进来，从而得到列表结构。 -->
<!-- 最后把list元素给到下面的插件MeScroll(),进行上拉刷新下拉加载的配置 -->

<!-- 课程的div里面的class全部放到下面做渲染 -->
<div id="list">
    <div class="list"></div>
</div>

<!-- 底部 -->
{include file="common/footer" /}

<script>
    // 做初始化 
    new WOW({
        boxClass: 'wow',      // 需要执行动画的元素的 class(默认是wow)
        animateClass: 'animated', //动画名。 animation.css 动画的 class(默认是animated)
        offset: 0,          // 距离可视区域多少开始执行动画，即加载的效果(默认为0)
        mobile: true,       // 是否在移动设备上执行动画(默认为true)
        live: true,       //（重点） 异步加载的内容是否有效(默认为true)
        callback: function (box) {
            // 每次动画启动时都会触发这个回调函数
            //传入的参数是动画DOM节点，box也就是动画的bom元素，也就是循环的li元素
            // console.log(box)
        },
        scrollContainer: "#list" // 可选滚动容器选择器，否则使用窗口
    }).init();

    var keywords = ''; //给个关键词空
    var page = 0; //当前页
    var limit = 5; //每页查询多少条

    // 给上面的搜索框name="rearch",绑定一个change改变事件
    //当关键词这里的事件一触发，就去到下面的DownCallback()方法这里
    $("input[name=search]").change(function () {
        keywords = $(this).val() //$(this)下的val
        DownCallback() //当关键词改变时，触发这里

    })


    //配置下拉刷新和上拉加载
    var scroll = new MeScroll('list', { //new一下MeScroll()插件，'list'是上面列表的id值，给到这里
        down: { //配置的下拉选项
            auto: false, //是否在初始化完毕之后自动执行下拉回调callback; 默认true
            callback: DownCallback //下拉刷新的回调。 DownCallback这个方法在下面添加了，在这里调用
        },
        up: { //配置的上拉选项，
            page: {
                num: page, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
                size: limit //每页数据条数,默认10
            },
            auto: true, //是否在初始化时以上拉加载的方式自动加载第一页数据; 默认false
            isBounce: false, //此处禁止ios回弹,解析(务必认真阅读,特别是最后一点): http://www.mescroll.com/qa.html#q10

            // 一进来自动触发上拉的回调函数
            callback: UpCallback, //上拉回调,此处可简写; 相当于 callback: function (page) { upCallback(page); }。UpCallback这个方法在下面添加了，在这里调用
            toTop: { //配置回到顶部按钮
                duration: 200,
                src: "/assets/home/plugin/mescroll/mescroll-totop.png", //返回到顶部的一个图片。默认滚动到1000px显示,可配置offset修改
                offset: 100, //距离底部还剩多少时，触发底部的加载效果
                supportTap: true, //快速响应事件
            }
        }
    })



    // 下拉刷新回调。DownCallback()此方法在这里添加，在上面调用
    function DownCallback() {
        scroll.resetUpScroll() //做一个下拉重置
        $('#list .list').empty() //这里做一个清除。$('#list .list')里面#list是id，list是class,这里表示的是把id=list里面的class=list的元素清空
    }

    // 上拉刷新回调。 UpCallback()此方法在这里添加，在上面调用
    async function UpCallback(current) {
        //当前页码值
        page = current.num
        limit = current.size

        //组装数据
        var data = {
            page: page, //分页
            limit: limit, //limit为每页显示多少条
            keywords: keywords //关键词
        };


        // 组装好数据后，开始做发送请求去控制器，fast/application/home/controller/index.php
        /* 这里用到了axious请求插件，就得把插件引进来，三件事
        第一，文件引入，引进位置fast/public/assets/home/plugin/axious,
        第二，文件修改，把request.js里面的请求前缀改一下，改为 axios.defaults.baseURL = 'http://www.fast.com/home'
        第三，路径书写，在本模块上面写上加载http插件的路径， 引入http请求插件 */
        var result = await POST({
            url: '/subject/index', //ajax请求的地址。发送到index控制器，subject（课程搜索）这个方法。
            params: data //组转好的数据
        })

        // 控制台显示结果如下：
        /*code: 1
        data: {count: 104, list: Array(10)}
        msg: "返回列表"
        url: "http://www.fast.com/home/index/subject.html"
        wait: 3
        [[Prototype]]: Object*/
        // 解析
        // code: 1，表示有数据
        // data: {count: 104, list: Array(10)}，表示总数为104，每页显示10条

        // 条件判断，code=0,表示暂无更多数据，就有如下操作
        if (result.code == 0) {

            /* 1.result.msg，表示在后台控制器fast/application/home/controller/index.php返回回来的结果result
            result是 $this->success('返回列表',null,$data)) 或者 $this->error('返回列表失败',null,$data);
            其中msg是 '返回列表' 或者 '返回列表失败'
            2. { duration: 1000 }，表示显示时间1s*/
            mui.toast(result.msg, { duration: 1000 })

            // 暂无更多数据
            scroll.endBySize(0, 0) //分页直接设置为0
            return false
        }

        // 从返回来的结果result的列表data中拿到的两个数据list和count
        var list = result.data.list
        var count = result.data.count

        //设置上拉加载状态。在拿到list和data数据后进出
        scroll.endBySize(list.length, count)
        // 把数据传到页面渲染的方法这里
        FetchList(list)
    }

    // 追加渲染数据
    function FetchList(list) {
        for (var item of list) {
            // 将课程的div直接插入这里做一个循环输出
            /* <p class="time">创建时间：${item.createtime}</p>的item.createtime还是时间戳表现形式，所以要在模型
            fast/application/common/model/Subject/Subject.php那里加个时间的虚拟字段,createtime_text,把时间戳转换回
            时分秒的形式*/
            var temp = `
            <div class="item wow bounceIn" data-wow-delay="0.05s">
                <a href="{:url('home/subject/info')}?subid=${item.id}">
                    <div class="avatar">
                        <img src="${item.thumbs_text}" alt="">
                    </div>
                    <div class="info">
                        <h5 class="title">${item.title}</h5>
                        <p class="type">课程分类：${item.cateid ? item.category.name : '暂无分类'}</p>
                        <p class="teacher">授课老师：demo老师</p>
                        <p class="time">上架时间：${item.createtime_text}</p>
                        <div class="like">
                            <div class="left">
                                <img src="/assets/home/images/thumbs-up.png" alt="">
                                <span>${item.likes_text}</span>
                            </div>

                            <span class="price">￥${item.price}</span>
                        </div>
                    </div>
                </a>
            </div>

        `
            // 然后直接把数据插入到 里面
            /*
            这段代码的作用是在ID为list的元素以及所有类名为list的元素的内部最后位置插入上面渲染的变量temp。
            这里使用了逗号选择器（, ），它会选择所有具有指定类名的元素，并对这些元素应用.append(temp)操作，
            从而在每个元素的末尾添加temp变量的内容。
            */
            $('#list .list').append(temp)

        }
    }




</script>